Implémentation d'info-bulles : Informations accessibles au survol et à la focalisation

Les info-bulles sont de petits messages d'aide contextuels qui apparaissent lorsqu'un utilisateur survole avec le pointeur de sa souris ou sélectionne un élément. Elles peuvent fournir des informations supplémentaires, clarifier le but d'un élément ou offrir des conseils sur la façon d'utiliser une fonctionnalité. Cependant, les info-bulles peuvent facilement devenir des cauchemars d'accessibilité si elles ne sont pas implémentées correctement. Ce guide présente les meilleures pratiques pour créer des info-bulles utilisables par tous, y compris les utilisateurs en situation de handicap.

Pourquoi l'accessibilité est-elle importante pour les info-bulles ?

L'accessibilité n'est pas seulement une question de conformité ; il s'agit de créer une meilleure expérience utilisateur pour tout le monde. Lorsque les info-bulles ne sont pas accessibles, cela peut exclure les utilisateurs qui dépendent de technologies d'assistance comme les lecteurs d'écran, la navigation au clavier ou la saisie vocale. Considérez ces scénarios :

• Utilisateurs de lecteurs d'écran : Si une info-bulle n'est pas correctement balisée, un lecteur d'écran pourrait ne pas annoncer sa présence ou son contenu.
• Utilisateurs de clavier : Si une info-bulle n'apparaît qu'au survol, les utilisateurs de clavier ne pourront pas y accéder.
• Utilisateurs ayant des troubles moteurs : Les mouvements précis de la souris requis pour les interactions de survol peuvent être difficiles, voire impossibles.
• Utilisateurs ayant des troubles cognitifs : Une info-bulle mal synchronisée ou déroutante peut créer de la frustration et nuire à la compréhension.

En suivant les meilleures pratiques d'accessibilité, nous pouvons nous assurer que les info-bulles améliorent plutôt qu'elles n'entravent l'expérience utilisateur pour tous.

Principes clés pour des info-bulles accessibles

Les principes suivants sont cruciaux pour créer des info-bulles accessibles :

1. Fournir un accès alternatif : S'assurer que les info-bulles sont accessibles à la fois par survol et par focalisation au clavier.
2. Utiliser les attributs ARIA : Utiliser les attributs ARIA (Accessible Rich Internet Applications) pour identifier et décrire correctement les info-bulles aux technologies d'assistance.
3. Gérer la focalisation : Contrôler où va la focalisation lorsqu'une info-bulle est affichée et masquée.
4. Assurer un contraste suffisant : Fournir un contraste de couleur suffisant entre le texte de l'info-bulle et l'arrière-plan.
5. Laisser un temps suffisant : Donner aux utilisateurs assez de temps pour lire le contenu de l'info-bulle.
6. Les rendre révocables : Fournir un moyen clair de fermer l'info-bulle.
7. Éviter la surutilisation : Utiliser les info-bulles avec parcimonie et uniquement lorsque cela est nécessaire.

Techniques d'implémentation

1. Utiliser le survol et la focalisation

L'aspect le plus critique des info-bulles accessibles est de s'assurer qu'elles sont accessibles aux utilisateurs de la souris et du clavier. Cela signifie que l'info-bulle doit apparaître à la fois au survol et lorsque l'élément reçoit la focalisation.

HTML :

            <a href="#" aria-describedby="tooltip-example">Lien d'exemple</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Ceci est un exemple d'info-bulle.</div>
            

              
                Copy
              
            
          

CSS :

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* S'assurer que l'info-bulle est au-dessus */
}

            

              
                Copy
              
            
          

Explication :

• aria-describedby : Cet attribut lie le lien à l'élément de l'info-bulle en utilisant son ID. Cela indique aux technologies d'assistance que l'info-bulle fournit des informations supplémentaires sur le lien.
• role="tooltip" : Ce rôle ARIA identifie l'élément comme une info-bulle.
• Le CSS utilise le sélecteur de frère adjacent (+) pour afficher l'info-bulle lorsque le lien est survolé ou a la focalisation.

JavaScript (Contrôle avancé - Optionnel) :

Alors que le CSS peut gérer un simple affichage/masquage, JavaScript permet un contrôle plus robuste, en particulier lorsque les info-bulles sont générées dynamiquement ou nécessitent un comportement plus complexe.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Utiliser les attributs ARIA

Les attributs ARIA sont essentiels pour fournir des informations sémantiques aux technologies d'assistance. Voici une description des attributs clés :

• aria-describedby : Comme mentionné précédemment, cet attribut établit la relation entre l'élément déclencheur et l'élément de l'info-bulle.
• role="tooltip" : Cet attribut définit explicitement l'élément comme une info-bulle.
• aria-hidden="true"/aria-hidden="false" : Utilisez-les pour indiquer si l'info-bulle est actuellement visible pour les technologies d'assistance. Lorsque l'info-bulle est masquée, définissez aria-hidden="true". Lorsqu'elle est visible, définissez aria-hidden="false". C'est particulièrement important lorsque vous utilisez JavaScript pour contrôler la visibilité de l'info-bulle.

Exemple :

            <button aria-describedby="help-tooltip">Envoyer</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Cliquez ici pour soumettre le formulaire.</div>
            

              
                Copy
              
            
          

JavaScript (pour aria-hidden) :

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Gérer la focalisation

Lorsqu'une info-bulle apparaît, elle ne devrait généralement *pas* voler la focalisation de l'élément déclencheur. La focalisation doit rester sur l'élément qui a déclenché l'info-bulle. Cela garantit que les utilisateurs de clavier peuvent continuer à naviguer sur la page sans interruptions inattendues.

Cependant, il peut y avoir des situations où vous *voulez* déplacer la focalisation vers l'info-bulle, en particulier si l'info-bulle contient des éléments interactifs (par exemple, des liens, des boutons). Dans ce cas, assurez-vous que :

• L'info-bulle est visuellement distincte pour indiquer qu'elle a la focalisation.
• Il existe un moyen clair de retourner la focalisation à l'élément déclencheur d'origine (par exemple, un bouton de fermeture dans l'info-bulle).

Dans la plupart des cas, il est préférable d'éviter la gestion de la focalisation au sein de l'info-bulle elle-même pour des raisons de simplicité et d'utilisabilité.

4. Assurer un contraste suffisant

Le contraste des couleurs est crucial pour la lisibilité. Assurez-vous que la couleur du texte dans vos info-bulles a un contraste suffisant par rapport à la couleur de fond. Les Directives pour l'accessibilité aux contenus Web (WCAG) recommandent un rapport de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le texte de grande taille (18pt ou 14pt gras).

Utilisez des vérificateurs de contraste en ligne pour vérifier que vos choix de couleurs respectent les normes d'accessibilité. Exemples de vérificateurs de contraste :

• WebAIM Contrast Checker : https://webaim.org/resources/contrastchecker/
• Coolors : https://coolors.co/contrast-checker

Exemple (Bon contraste) :

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Exemple (Mauvais contraste) :

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Laisser un temps suffisant

Les utilisateurs ont besoin de suffisamment de temps pour lire le contenu de l'info-bulle. Évitez les info-bulles qui disparaissent trop rapidement. Bien qu'il n'y ait pas de chiffre magique, visez un temps d'affichage minimum de quelques secondes. De plus, l'info-bulle doit rester visible tant que l'utilisateur survole ou a la focalisation sur l'élément déclencheur. Si vous devez fermer l'info-bulle en raison d'autres événements, fournissez un indicateur que l'info-bulle va se fermer.

Si le contenu de l'info-bulle est long, envisagez de fournir un moyen pour l'utilisateur de fermer manuellement l'info-bulle (par exemple, un bouton de fermeture ou en appuyant sur la touche Échap).

6. Les rendre révocables

Bien que les info-bulles disparaissent souvent automatiquement lorsque l'utilisateur éloigne sa souris ou supprime la focalisation, il est de bonne pratique de fournir un moyen clair de les fermer manuellement, en particulier pour les info-bulles longues ou celles contenant des éléments interactifs.

Méthodes pour fermer les info-bulles :

• Bouton de fermeture : Inclure un bouton de fermeture bien visible dans l'info-bulle.
• Touche Échap : Permettre aux utilisateurs de fermer l'info-bulle en appuyant sur la touche Échap.
• Clic à l'extérieur : Fermer l'info-bulle lorsque l'utilisateur clique n'importe où en dehors de l'info-bulle et de l'élément déclencheur. (À utiliser avec prudence car cela peut être perturbant).

Exemple (Bouton de fermeture) :

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Ceci est le contenu de mon info-bulle.
  <button onclick="hideTooltip()">Fermer</button>
</div>
            

              
                Copy
              
            
          

Exemple (Touche Échap) :

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Remplacez par votre fonction de masquage d'info-bulle
  }
});

            

              
                Copy
              
            
          

7. Éviter la surutilisation

Les info-bulles doivent être utilisées avec parcimonie et uniquement lorsqu'elles fournissent des informations vraiment utiles. La surutilisation des info-bulles peut encombrer l'interface, distraire les utilisateurs et créer une expérience frustrante.

Alternatives aux info-bulles :

• Étiquettes claires : Utilisez des étiquettes claires et descriptives pour les champs de formulaire, les boutons et les liens.
• Aide contextuelle : Fournissez du texte d'aide directement dans l'interface, à proximité des éléments pertinents.
• Documentation d'aide : Liez vers une documentation d'aide complète pour les fonctionnalités plus complexes.

Considérations avancées

Contenu dynamique

Si le contenu de votre info-bulle est généré dynamiquement (par exemple, chargé depuis une API ou mis à jour en fonction de l'entrée de l'utilisateur), assurez-vous que l'attribut aria-describedby et la visibilité de l'info-bulle sont mis à jour en conséquence. Utilisez JavaScript pour gérer ces mises à jour.

Positionnement

Examinez attentivement le positionnement de vos info-bulles. Évitez de les placer de manière à masquer un contenu important ou à provoquer des décalages de mise en page. Soyez attentif aux différentes tailles d'écran et résolutions, et utilisez CSS pour vous assurer que les info-bulles sont toujours visibles dans le viewport.

Appareils mobiles

Les info-bulles reposent traditionnellement sur les interactions de survol, qui ne sont pas disponibles sur les appareils tactiles. Pour les appareils mobiles, envisagez d'utiliser des méthodes d'interaction alternatives, telles que :

• Appui : Affichez l'info-bulle lorsque l'utilisateur appuie sur l'élément.
• Appui long : Affichez l'info-bulle lorsque l'utilisateur appuie longuement sur l'élément.
• Afficher à la focalisation : Affichez lorsque l'élément reçoit la focalisation. Cela peut être réalisé avec JavaScript, en vérifiant la prise en charge tactile (par exemple, `('ontouchstart' in window)`) et en modifiant le comportement d'affichage en conséquence.

Tester vos info-bulles

Testez minutieusement vos info-bulles pour vous assurer qu'elles sont accessibles à tous les utilisateurs. Utilisez une combinaison de tests manuels et d'outils de test d'accessibilité automatisés.

Méthodes de test :

• Navigation au clavier : Vérifiez que les info-bulles sont accessibles à l'aide du clavier.
• Test avec un lecteur d'écran : Utilisez un lecteur d'écran pour vous assurer que les info-bulles sont correctement annoncées.
• Analyse du contraste des couleurs : Utilisez un vérificateur de contraste des couleurs pour vérifier un contraste suffisant.
• Test sur mobile : Testez les info-bulles sur différents appareils mobiles et tailles d'écran.
• Test d'accessibilité automatisé : Utilisez des outils comme axe DevTools, WAVE ou Lighthouse pour identifier les problèmes d'accessibilité potentiels.

Internationalisation (i18n) et Localisation (l10n)

Lors du développement d'info-bulles pour un public mondial, gardez à l'esprit l'internationalisation et la localisation :

• Direction du texte : Prenez en charge les directions de texte de gauche à droite (LTR) et de droite à gauche (RTL). Utilisez les propriétés logiques CSS (par exemple, `margin-inline-start`, `margin-inline-end`) au lieu des propriétés physiques (par exemple, `margin-left`, `margin-right`) pour la mise en page.
• Traductions spécifiques à la langue : Fournissez des traductions du contenu des info-bulles pour différentes langues.
• Formats de date et d'heure : Adaptez les formats de date et d'heure à la locale de l'utilisateur.
• Formats de nombres : Utilisez des formats de nombres appropriés pour différentes régions (par exemple, séparateurs décimaux, séparateurs de milliers).

Conclusion

L'implémentation d'info-bulles accessibles nécessite une planification minutieuse et une attention aux détails. En suivant les principes et les techniques décrits dans ce guide, vous pouvez créer des info-bulles utilisables par tous, quelles que soient leurs capacités. N'oubliez pas que l'accessibilité est un processus continu, alors continuez à tester et à affiner vos info-bulles pour vous assurer qu'elles répondent aux besoins de tous vos utilisateurs.

Ressources

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA